<template>
	<view>
		<view class="bigbox">
			<scroll-view direction="vertical" bounces="true" scroll-y="true" style="height: 100vh;">
				<view class="detailcontent">
					<view class="upcontent">
						<view class="title">
							<span
							 style="
							 width:100%;
							 color: rgb(63, 63, 63);
							 font-size: 18px;
							 font-weight: 600;
							  ">
								{{dtData.title}}
								</span>
								<u-tag
								style="margin-top: 3px;" 
								size="large"
								plain
								:text="dtData.type === 1 ? '普通' : dtData.type === 2 ? '重要' : '紧急'"
								:type="dtData.type === 1 ? 'success' : dtData.type === 2 ? 'warning' : 'error'"
								>
								
								</u-tag>
						</view>
						<u-line length="92%" style="margin-left: 12px;"></u-line>
						
						<view class="content">
							<span style="width:100%;color: rgb(112, 112, 112);font-size: 16px;margin-left: 5px;letter-spacing: 1px;">{{dtData.desc}}</span><br />
							<view class="datetime">
								<span style="color: lightgrey;font-size: 14px;margin-left: 58%;">2025-05-09 13:28:54</span>
							</view>
						</view>
					</view>
					
					
					
					<!-- 富文本区域 -->
					<view>
						 <u-parse 
						 :content="dtData.content" 
						 style="
						 background-color: #ffffff;
						 border-radius: 10px;
						 margin: 10px;
						 padding: 8px;
						 "
						 ></u-parse>
					</view>
					
					<!-- 底部链接区域 -->
					<view class="bottom" v-if="urls.some(item => item.mp_url)">
						<view style="margin:8px;">相关链接</view>
						<view class="link" >
							<view  v-for="(data,index) in urls">
								<view class="link-content" v-if="data.mp_url.length && data.title.length">
								      <view >
										  <u-icon name="attach" size="16" ></u-icon>
									  </view>
								      <view >
										  <u-link  :text="data.title"  color="black" @click="jump(data.mp_url)"></u-link>
									  </view>
								</view>
								
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dtData:{},
				urls:[]
			}
		},
		onLoad(){
			this.dtData = this.$set(this,'dtData',uni.getStorageSync('currentMessageInfo'));
			for(let k in this.dtData.url){
				if(this.dtData.url[k].mp_url.length){
					this.urls.push(this.dtData.url[k])
				}
			}
		},
		methods: {
			jump(url){
				this.navto(url)
			},
		}
	}
</script>

<style>
	.circle{
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background-color: red;
		position: relative;
	}
.bottom{
	width: 95%;
	background-color: #ffffff;
	border-radius: 10px;
	margin: auto;
	margin-bottom: 10px;
}	
.link{
	display: flex;
	align-items: center;
	flex: 3;
	gap:10px;
	margin: 10px;
}
.link-content {
  display: flex;
  align-items: center;
  gap: 5px;
}
.bigbox{
	width: 100%;
	background-color: rgb(245, 245, 245);
}
.upcontent{
	background-color: #ffffff;
	border-radius: 10px;
	margin: 10px;
}
.detailcontent{
	width: 100%;
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	margin:auto;
}
.title{
	width: 92%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-left: 12px;
	margin-top: 10px;
	background-color: #ffffff;
	border-radius: 10px;
	margin-bottom: 10px;
}
.content{
	width: 90%;
	margin-top: 10px;
	margin-left: 10px;
	
}
.datetime {
	margin-bottom: 10px;
}
.downcontent{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-bottom: 10px;
}
.checknum{
	display: flex;
	align-items: center;
	
}
.parse{
	width: 92%;
	background-color: #ffffff;
	border-radius: 10px;
	margin: 10px;
}
</style>
